import {Router, Switch, NavLink, Route, Redirect} from 'react-router-dom'
import {Component} from "react";
import history from "@/utils/history";


console.log(history)


function One() {
  return <h4>one</h4>
}


function First(props) {
  console.log(props)
  return <div>
    <h1>我是标题 </h1>
    <button onClick={() => props.history.push('/second')}>点击跳转</button>
    <NavLink to={'/first/one'} activeStyle={{color: 'red'}} activeClassName={'active'}>第一页</NavLink>
    <hr/>

    <Route path={'/first/one'} component={One}/>
  </div>
}

function Second(props) {
  console.log(props)
  return <div>
    <h3>second</h3>
    <NavLink to={'/second/one'}>第一页面</NavLink>
    <hr/>
    <Route component={One} path={'/second/one'}>

    </Route>
  </div>
}

export default class App extends Component {
  render() {
    return (
      <Router history={history}>
        <NavLink to={'/first'} activeStyle={{color: 'green'}}>
          首页
        </NavLink>
        <NavLink to={'/second'}>第二页</NavLink>
        <Switch>

          <Redirect exact to={'/first'} from={'/'}/>
          <Route path={'/first'}>
            {
              (props) => <First {...props} />
            }
          </Route>
          <Route path={'/second'} component={Second}/>
        </Switch>
      </Router>
    );
  }

}
